<template>
  <!-- 侧边栏 -->
  <div class="u-aside f-fl">
    <div id="singer-cat-nav">
      <div>
        <h2 class="tit">推荐</h2>
        <ul class="cate-list">
          <li>
            <router-link
              to="/discover/artist"
              :class="$route.path == '/discover/artist' && !$route.query.initial ? 'current' : ''"
              ref="artistCateRef"
              @click.native="artistCateClick($event)"
              >推荐歌手</router-link
            >
          </li>
          <li>
            <router-link to="/discover/artist/signed" @click.native="artistCateClick($event)"
              >入驻歌手</router-link
            >
          </li>
        </ul>
      </div>
      <div class="blk">
        <h2 class="tit">华语</h2>
        <ul class="cate-list">
          <li>
            <router-link
              to="/discover/artist?area=7&type=1&initial=-1"
              @click.native="artistCateClick($event)"
              >华语男歌手</router-link
            >
          </li>
          <li>
            <router-link
              to="/discover/artist?area=7&type=2&initial=-1"
              @click.native="artistCateClick($event)"
              >华语女歌手</router-link
            >
          </li>
          <li>
            <router-link
              to="/discover/artist?area=7&type=3&initial=-1"
              @click.native="artistCateClick($event)"
              >华语组合/乐队</router-link
            >
          </li>
        </ul>
      </div>
      <div class="blk">
        <h2 class="tit">欧美</h2>
        <ul class="cate-list">
          <li>
            <router-link
              to="/discover/artist?area=96&type=1&initial=-1"
              @click.native="artistCateClick($event)"
              >欧美男歌手</router-link
            >
          </li>
          <li>
            <router-link
              to="/discover/artist?area=96&type=2&initial=-1"
              @click.native="artistCateClick($event)"
              >欧美女歌手</router-link
            >
          </li>
          <li>
            <router-link
              to="/discover/artist?area=96&type=3&initial=-1"
              @click.native="artistCateClick($event)"
              >欧美组合/乐队</router-link
            >
          </li>
        </ul>
      </div>
      <div class="blk">
        <h2 class="tit">日本</h2>
        <ul class="cate-list">
          <li>
            <router-link
              to="/discover/artist?area=8&type=1&initial=-1"
              @click.native="artistCateClick($event)"
              >日本男歌手</router-link
            >
          </li>
          <li>
            <router-link
              to="/discover/artist?area=8&type=2&initial=-1"
              @click.native="artistCateClick($event)"
              >日本女歌手</router-link
            >
          </li>
          <li>
            <router-link
              to="/discover/artist?area=8&type=3&initial=-1"
              @click.native="artistCateClick($event)"
              >日本组合/乐队</router-link
            >
          </li>
        </ul>
      </div>
      <div class="blk">
        <h2 class="tit">韩国</h2>
        <ul class="cate-list">
          <li>
            <router-link
              to="/discover/artist?area=16&type=1&initial=-1"
              @click.native="artistCateClick($event)"
              >韩国男歌手</router-link
            >
          </li>
          <li>
            <router-link
              to="/discover/artist?area=16&type=2&initial=-1"
              @click.native="artistCateClick($event)"
              >韩国女歌手</router-link
            >
          </li>
          <li>
            <router-link
              to="/discover/artist?area=16&type=3&initial=-1"
              @click.native="artistCateClick($event)"
              >韩国组合/乐队</router-link
            >
          </li>
        </ul>
      </div>
      <div class="blk">
        <h2 class="tit">其他</h2>
        <ul class="cate-list">
          <li>
            <router-link
              to="/discover/artist?area=0&type=1&initial=-1"
              @click.native="artistCateClick($event)"
              >其他男歌手</router-link
            >
          </li>
          <li>
            <router-link
              to="/discover/artist?area=0&type=2&initial=-1"
              @click.native="artistCateClick($event)"
              >其他女歌手</router-link
            >
          </li>
          <li>
            <router-link
              to="/discover/artist?area=0&type=3&initial=-1"
              @click.native="artistCateClick($event)"
              >其他组合/乐队</router-link
            >
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    artistCateClick(e) {
      e.target.classList.add('current')
      // e.preventDefault()
    }
  },
  watch: {
    $route() {
      this.currentInital = this.$route.query.initial
      if (this.$route.query.initial) {
        this.visible = false
      } else {
        this.visible = true
      }
      // this.currentInital = this.$route.query.initial
      // 获取歌手列表
      // this.getSingerList()
    }
  }
}
</script>

<style lang="less" scoped>
.u-aside {
  width: 180px;
  height: 1000px;
  #singer-cat-nav {
    padding: 0 10px 40px;
    margin-top: 51px;
    .tit {
      height: 25px;
      padding-left: 14px;
      font-size: 16px;
      font-family: 'Microsoft Yahei';
    }
    .cate-list {
      li {
        margin-bottom: 2px;
        a {
          // float: left;
          display: block;
          width: 160px;
          height: 29px;
          padding-left: 30px;
          line-height: 29px;
          text-align: left;
          background: url(~@/assets/images/artist/singer.png) no-repeat 0 -30px;
          &.current {
            background-position: 0 0;
            text-decoration: none;
            color: #c20c0c;
          }
        }
      }
    }
    .blk {
      margin: 5px 0 0;
      padding-top: 16px;
      border-top: 1px solid #d3d3d3;
    }
  }
}
</style>
